<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>CSC Banking System</title>
<link rel="stylesheet" href="css/screen.css" type="text/css" />
<link rel="stylesheet" href="css/jquery-ui-min.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.dataTables.css" type="text/css" />

<!-- SCRIPT -->
<script src="js/jquery/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="js/jquery/jquery.tooltip.js" type="text/javascript"></script>
<script src="js/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery/jquery-ui.js" type="text/javascript"></script>
<script src="js/jquery/jquery.dataTables.js" type="text/javascript"></script>


<script type="text/javascript">
	$(document).ready(function() {
		$("#mytable").dataTable();
		
	});
	
</script>
</head>
<body>
	<div id="page-top-outer">

		<div id="page-center" style="background-color: white;">

			<!-- start logo -->
			<div id="logo" style="padding-left: 50px">
				<a href=""><img src="images/logo.png" width="229" height="74"
					alt="" /></a>
			</div>
		</div>
	</div>
	<div class="nav-outer-repeat">	
	</div>

	<div id="content-outer">
		<!-- start content -->
		<div id="content">
			<div id="page-heading">
				<h1>Customer</h1>
			</div>
			
			<table border="0" width="100%" cellpadding="0" cellspacing="0"
				id="content-table">
				<tr>
					<td id="tbl-border-left"></td>
					<td>
						<div id="content-table-inner">
							<div id="page-heading">
			<form action="loadModifyCustomer.html">
				<%-- <input type="hidden" class="inp-form" name="txtLoginId" value="${user}"/> --%>
				<input type="submit" class="btnAdd" value="Edit Info" id=changeInfo/>
			</form>
			<br />
			<form action="loadTransaction.html">
				<%-- <input type="hidden" class="inp-form" name="txtLoginId" value="${user}"/> --%>
				<input type="submit" class="btnAdd" value="Transaction" id="loadTrans"/>
			</form>
			<br />
			<form action="searchTransaction.html">
				<%-- <input type="hidden" class="inp-form" name="txtLoginId" value="${user}"/> --%>
				<input type="submit" class="btnAdd" value="Search" id="searchTrans"/>
			</form>
			<br>
			<form action="card.html" method="GET">
				<input type="submit" class="btnAdd" value="Add Card" id="addCard"/>
			</form>
			</div>
		</div>
		</td>
		</tr>
		</table>
			<!--  start page-heading -->
			<div id="page-heading">
				<h1>Account Management</h1>
			</div>
			<table border="0" width="100%" cellpadding="0" cellspacing="0"
				id="content-table">
				<tr>
					<th rowspan="3" class="sized"><img
						src="images/shared/side_shadowleft.jpg" width="20" height="300"
						alt="" /></th>
					<th class="topleft"></th>
					<td id="tbl-border-top">&nbsp;</td>
					<th class="topright"></th>
					<th rowspan="3" class="sized"><img
						src="images/shared/side_shadowright.jpg" width="20" height="300"
						alt="" /></th>
				</tr>
				<tr>
					<td id="tbl-border-left"></td>
					<td>
						<div id="content-table-inner">
							<div id="page-heading">
			<h1>Add Account Information</h1>
		</div>
		<div id="content-table-inner" style="padding-left: 35px;">
			<table border="0" width="100%" cellpadding="0" cellspacing="0">
				<tr valign="top">
					<td>
						<form action="createAccount.html" method="post">
							<table border="0" cellpadding="0" cellspacing="0" id="id-form">
								<tr>
									<th valign="top">Account Type:</th>
									<td><select id="selectAccountType" name="accountType">
											<option value="Deposit Account">Deposit Account</option>
											<option value="Saving Account">Saving Account</option>
											<option value="Others">Others</option>
									</select></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Account Number</th>
									<td><input type="text" class="inp-form" name="accountNumber"/></td>
								</tr>
								<tr>
									<th valign="top">Account Name:</th>
									<td><input type="text" class="inp-form" name="accountName"/></td>
									<td></td>
								</tr>
								<tr>
									<th valign="top">Amount:</th>
									<td><input type="text" class="inp-form" name="availableAmount"/></td>
									<td></td>
								</tr>
								<tr>
									<td></td>
									<td><input type="submit" class="btnAdd" value="Save"
										id="addAccount" /></td>
									<td></td>
								</tr>
							</table>
						</form>
					</td>
				</tr>
			</table>
		</div>
							<table id="mytable">
								<thead>
									<tr>
										<th>Account Number</th>
										<th>Account Name</th>
										<th>Account Type</th>
										<th>Amount</th>
									</tr>
								</thead>
								<tbody>
									<c:forEach var="account" items="${listAccount}">
										<tr>
											<td>${account.number}</td>
											<td>${account.accountName}</td>
											<td>${account.accountType}</td>	
											<td>${account.availableAmount}</td>												
										</tr>
									</c:forEach>
								</tbody>
							</table>
						</div>
					</td>
					<td id="tbl-border-right"></td>
				</tr>
				<tr>
					<th class="sized bottomleft"></th>
					<td id="tbl-border-bottom">&nbsp;</td>
					<th class="sized bottomright"></th>
				</tr>
			</table>
			<br />
		</div>
		<div class="clear">&nbsp;</div>
	</div>

	<div class="clear">&nbsp;</div>

	<!-- start footer -->
	<div id="footer">
		<!--  start footer-left -->
		<div id="footer-left">
			&copy; Copyright 2015 DAOnJPA| Java Fresher Training Program. <span
				id="spanYear"></span> <a href="http://www.csc.com" target="_blank">www.csc.com</a>
		</div>
		<!--  end footer-left -->
		<div class="clear">&nbsp;</div>
	</div>
</body>
</html>